<template>
    <view class="count" @click.stop="stopFunc" :class="size">

        <view class="box" v-if="numVal > 0">
            <text class="showNums">{{ numVal }}</text>

            <!-- <text class="iconfont icon-jiahao" @click="countFunc(1)"></text> -->
            <view class="btn-cont">
                <text class="iconfont icon-jiahao"></text>
                <view class="btn-mask" @click="countFunc(1)"></view>
            </view>
        </view>
        <view v-else>
            <view class="btn-cont">
                <text class="iconfont icon-jiahao" ></text>
                <view class="btn-mask" @click="countFunc(1)"></view>
            </view>
              

        </view>
          
    </view>
</template>

<script>

export default {
    props:{
        numVal:{
            type:[Number,String],
            default:0
        },
        size:String,
        parameter:[Number,String,Object,Array]
    },
    components: {},
    data () {
        return {
            num:0
        }
    },

    methods: {
        initData () {


        },
        countFunc( e  ) {

            let num = this.numVal + e
           
            this.$emit('update:numVal', num )

            this.$emit('change', num ,this.parameter)
            
		},
        stopFunc(){}
    }
}
</script>

<style scoped lang="scss">
.count{
    display: inline-block;
    text-align: right;
    position: relative;
    padding: 6rpx;
    
    .btn-cont{
        position: relative;
        width: 38rpx;
        height: 38rpx;
        text-align: center;
        line-height: 38rpx;
        color: #fff;
        border-radius: 4px;
        background: #313138;
        font-size: 0;
        .iconfont{
            font-size: 26rpx;
            color: #fff;
        }
        .btn-mask{
            box-sizing: content-box;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: -10rpx 0 0 -10rpx;
            padding: 10rpx;
            // background: red;
            line-height: 1;
        }
    }
    .box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .nums{
            text-align: center;
            min-width: 40rpx;
            color: #000;
            font-size: 26rpx;
        }
    }
    &.big{
        .iconfont{
            font-size: 54rpx;
        }
        .box{
           
            .nums{
                min-width: 80rpx;
                font-size: 34rpx;
            }
        }
    }
    .showNums{
        position: absolute;
        right: -4rpx;
        top: -4rpx;
        z-index: 4;
        background: #ff0000;
        color: #fff;
        text-align: center;
        display: inline-block;
        border-radius: 24rpx;
        font-size: 18rpx !important;
        padding: 4rpx 8rpx;
        // background: #f60;
        line-height: 1em;

    }
}
</style>
